<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		ul {
			width: 500px;
			border: 1px solid #333;
			margin: 0 auto;
		}
		li {
			height: 40px;
			border: 1px solid #333;
			list-style: none;
			text-align: center;
			line-height: 40px;

		}

		li:hover {
			background-color: skyblue;
		}

		.red {
			background: red !important;
		}
	</style>
	<script>
		window.onload = function(){
			var li = document.querySelectorAll("li");
			var i,j,theObj;
			function hilight(obj){
				if(theObj!=null){
					theObj.classList.remove("red");
				}
				if(theObj = obj){
					obj.classList.add("red");
				}
			}
		
			for(i = 0; i < li.length; i++){
				li[i].onclick = function(){
					hilight(this);
				}
			}
	
		}
	</script>
</head>
<body>
	<ul>
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
		<li>555</li>
	</ul>
</body>
</html>